<template>
  <div class="common-layout">
    <el-container>

      <el-header class="header">
        <h1> <span>Tlias智能学习辅助系统</span></h1>
        <div class="toolbar">
          <el-dropdown>
            <el-icon class="icon" size="medium">
              <setting />
            </el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>个人信息</el-dropdown-item>
                <el-dropdown-item>查看</el-dropdown-item>
                <el-dropdown-item>退出</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <span class="name">{{ name }}</span>
        </div>
      </el-header>

      <el-container>
        <el-aside class="sidebar">
          <el-scrollbar>
            <el-menu :default-openeds="['1', '4']" class="menu">

              <router-link to="/view">
                <el-menu-item class="menu-item">首页</el-menu-item>
              </router-link>

              <el-sub-menu index="2" class="menu-item">
                <template #title>
                  班级学员管理
                </template>
                <router-link to="/classes"><el-menu-item index="2-1" class="submenu-item">班级管理</el-menu-item></router-link>
                <router-link to="/student"><el-menu-item index="2-2" class="submenu-item">学员管理</el-menu-item></router-link>
              </el-sub-menu>

              <el-sub-menu index="3" class="menu-item">
                <template #title>
                  系统信息管理
                </template>
                <router-link to="/dept"><el-menu-item index="3-1" class="submenu-item">部门管理</el-menu-item></router-link>
                <router-link to="/emp"><el-menu-item index="3-2" class="submenu-item">员工管理</el-menu-item></router-link>
              </el-sub-menu>
              <el-sub-menu index="4" class="menu-item">
                <template #title>
                  数据统计管理
                </template>
                <el-menu-item index="4-1" class="submenu-item">员工信息统计</el-menu-item>
                <el-menu-item index="4-2" class="submenu-item">学院信息统计</el-menu-item>
              </el-sub-menu>
            </el-menu>
          </el-scrollbar>
        </el-aside>

        <el-main class="main">
          <router-view></router-view>
        </el-main>


      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";

onMounted(() => {
  const token = localStorage.getItem('token');
  console.log('密要' + token);
})

const name = ref("管理员")
</script>

<style scoped>
.header {
  background-color: #409EFF;
  height: 60px;
  padding: 0 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.toolbar {
  display: flex;
  align-items: center;
}

.icon {
  margin-right: 8px;
  color: #fff;
}

.name {
  color: #fff;
  font-size: 16px;
  margin-left: 16px;
}

.sidebar {
  background-color: #f0f2f5;
  width: 200px;
  height: calc(100vh - 60px);
}

.menu {
  background-color: #f0f2f5;
  border-right: none;
}

.menu-item {
  color: #606266;
  font-size: 14px;
  line-height: 40px;
}

.submenu-item {
  color: #909399;
  font-size: 12px;
  line-height: 36px;
}

.main {
  background-color: #f0f2f5;
  flex-grow: 1;
  padding: 20px;
}

</style>